<template>
	<div class="setAreaWrap" v-if="isDataLoad">
		<p class="selectNewTit"><span>设置页面使用的区域：</span></p>
		<div v-if="pageConfig.type == 'list'">
			<el-checkbox 
				v-model="areaList.showTitQuery" 
				label="筛选区域" 
				@change="changeMet"
				size="large" />
			<el-checkbox 
				v-model="areaList.tableBtn" 
				label="按钮区域" 
				@change="changeMet"
				size="large" />
			<el-checkbox 
				v-model="areaList.tableArea" 
				label="表格区域" 
				@change="changeMet"
				size="large" />
			<el-checkbox 
				v-model="areaList.bottomArea" 
				label="分页区域" 
				@change="changeMet"
				size="large" />
		</div>
		<div class="btnArea">
            <el-button @click="cancelSetArea">取消</el-button>
            <el-button @click="saveSetArea" type="primary">保存</el-button>
        </div>
	</div>
</template>
<script type="text/javascript">
	import useRoute  from '@/store/route.js'
    import { mapState,mapActions } from 'pinia';
	export default{
		data () {
			return {
				isDataLoad:false,
				areaList:{},
				pageConfig:{}
			}
		},
		computed: {
            ...mapState(useRoute, ['nowItem'])
        },
		created (){
			//读取当前选择页面的配置文件
            this.$util.native.readJson(this.nowItem).then(res => {
				this.pageConfig = res;
                this.areaList = res.area;
                this.isDataLoad = true;
            });
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
			cancelSetArea(){
                this.$emit("cancelSetArea");
            },
			async saveSetArea(){
				//修改json文件
				await this.$util.native.editNativeFile(this.nowItem,this.pageConfig);
				//
				this.$emit("cancelSetArea");
            },
			changeMet(){
				//设置页面中样式
				this.$emit("setAreaChange",this.areaList);
			}
		}
	}
</script>
<style type="text/css" lang="less">
	.setAreaWrap{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 200px;
        background-color: white;
        z-index: 10;
        padding: 10px;
		.btnArea{
			margin-top:15px;
            .el-button{
                width: 45%;
            }
        }
		.selectNewTit{
            font-size: 14px;
            color: #999;
			margin-bottom:15px;
        }
		.el-checkbox{
			display: flex;
			zoom:110%;
		}
		.checkboxAuto{
			zoom: 120%;
		}
    }
</style>